<template>
  <el-form
    :model="invoiceHead"
    label-position="left"
    label-width="100px"
    size="mini"
    style="padding-bottom:30px;"
  >

    <el-row
      style="display: flex; flex-decration: row; justify-content: space-between"
    >
      <el-col :span="6">
        <img
          src="https://img.alicdn.com/imgextra/i4/6000000003679/O1CN015mS8hG1d31pMbAmBq_!!6000000003679-2-ampmedia.png"
          alt=""
          width="75px"
          height="75px"
          style="margin-left: 20px; margin-top: -9px"
        />
        <div class="item">
          <h5>
            机器编号:
            <i></i>
          </h5>
          <span>661015347304</span>
        </div>
      </el-col>
      <el-col
        :span="12"
        style="display: flex; flex-decration: row; justify-content: center;"
      >
        <div class="title" >
          <h3>
            {{ invoiceHead.title }}
            <i></i>
          </h3>
          <div class="line" style="position: relative;display:flex;align-items:center;justify-content:center;">
            <p id="text1" style="position:absolute;top:-54px;color:rgba(255,2,0,1);z-index: 999;font-weight:bold" >全  国  统  一  发  票  监  制  章</p>
            <p id="text2" style="position:absolute;top:10px;color:rgba(255,2,0,1);z-index: 999;font-weight:bold;" >省 税 务 局</p>
           <div  class="ellipse3" >
             <div class="ellipse2" style=" display:flex;align-items:center;justify-content:center;margin:auto;margin-top:2px">
                国家税务总局
              </div>
           </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <el-col :span="24">
          <div class="right" style="margin-top: -5px">
            <div class="item">
              <h5>
                发票代码:
                <i></i>
              </h5>
              <span>{{ invoiceHead.goldtaxCode }}</span>
            </div>
            <div class="item">
              <h5>
                发票号码:
                <i></i>
              </h5>
              <span>{{ invoiceHead.goldtaxNum }}</span>
            </div>
            <div class="item">
              <h5>
                开票日期:
                <i></i>
              </h5>
              <span>{{ invoiceHead.billGdate }}</span>
            </div>
            <div class="item">
              <h5>
                检验码:
                <i></i>
              </h5>
              <span>71392 04403 09396 00109</span>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <el-row style="border: 2px solid rgba(156, 82, 35, 0.7);">
      <el-col :span="14">
        <el-row>
          <el-col
            :span="1"
            style="
              font-size: 18px;
              text-align: center;
              color: rgba(156, 82, 35, 0.7);
              font-size: 15px;
              border-right: 2px solid rgba(156, 82, 35, 0.7);
            "
          >
            <p style="margin-top: 10px">购</p>
            <p>买</p>
            <p>方</p>
          </el-col>
          <el-col :span="23" style="padding-left: 8px">
            <div class="item">
              <h5 style="width: 100px">
                名称:
                <i></i>
              </h5>
              <span>{{ invoiceHead.custName }}</span>
            </div>
            <div class="item">
              <h5 style="width: 100px">
                纳税人识别号:
                <i></i>
              </h5>
              <span>{{ invoiceHead.custTaxcode }}</span>
            </div>
            <div class="item">
              <h5 style="width: 100px">
                地址、电话:
                <i></i>
              </h5>
              <span>
                {{ invoiceHead.custAddress }} {{ invoiceHead.custTelephone }}
              </span>
            </div>
            <div class="item">
              <h5 style="width: 100px">
                开户行及账号:
                <i></i>
              </h5>
              <span>
                {{ invoiceHead.custBankname }} {{ invoiceHead.custBankaccount }}
              </span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10" style="display: flex; flex-decration: row">
        <div
          class="left"
          style="
            font-size: 18px;
            text-align: center;
            color: rgba(156, 82, 35, 0.7);
            font-size: 15px;
            border-right: 2px solid rgba(156, 82, 35, 0.7);
            border-left: 2px solid rgba(156, 82, 35, 0.7);
            padding: 0px 3px;
          "
        >
          <p style="margin-top: 10px">密</p>
          <p>码</p>
          <p>区</p>
        </div>
        <div class="right" style="padding:5px 10px">
          10-48---*98952*398833*+7/9<656577186*522+2-/1*0-89*<</</>430-8+<2>268452*4/8977597>98779877186*522+2-/1*62*/
        </div>

      </el-col>
    </el-row>
    <el-row style=" border-right: 2px solid rgba(156, 82, 35, 0.7); border-left: 2px solid rgba(156, 82, 35, 0.7); border-bottom: 2px solid rgba(156, 82, 35, 0.7);">
      <el-col :span="24" >
        <el-row class="box" style="color:rgba(156, 82, 35, 0.7);height:25px ;line-height:25px;" >
          <el-col :span="6" class="borderRight">货物或应税劳务、服务名称</el-col>
          <el-col :span="3" class="borderRight">规格型号</el-col>
          <el-col :span="1" class="borderRight">单位</el-col>
          <el-col :span="2"  class="borderRight">数量</el-col>
          <el-col :span="3" class="borderRight">单价</el-col>
          <el-col :span="4" class="borderRight">金额</el-col>
            <el-col :span="1" class="borderRight">税率</el-col>
            <el-col :span="4" >税额</el-col>
        </el-row>
        <el-row class="box"    v-for="(item,index) in invoiceHead.invoiceSplitLines" :key="index">
          <el-col :span="6" class="borderRight every" style="text-align:left;"><div>{{item.itemName}}</div></el-col>
          <el-col  :span="3" class="borderRight every" style="text-align:left;"><div>{{item.itemSpec}}</div></el-col>
          <el-col :span="1" class="borderRight every"><div>{{item.unitName}}</div></el-col>
          <el-col :span="2" class="borderRight every" style="text-align:right;"><div v-if="item.quantity != 0">{{item.quantity}}</div></el-col>
          <el-col :span="3" class="borderRight every" style="text-align:right;"><div v-if="item.zpriceWsj != 0">{{item.zpriceWsj}}</div></el-col>
          <el-col  :span="4" class="borderRight every" style="text-align:right;"><div>{{item.zamountWsj}}</div></el-col>
            <el-col :span="1" class="borderRight every" style="text-align:right;"><div>
              <span v-if="item.taxRate>0.0111">
                {{item.taxRate*100}}%
              </span>
              <span v-if="item.taxRate<=0.0111">{{item.taxZero}}</span>
              </div></el-col>
            <el-col    :span="4" class="every" style="text-align:right;"><div>{{item.zamountSej}}</div></el-col>
        </el-row>
        <el-row class="box" style="color:rgba(156, 82, 35, 0.7);height:25px ;line-height:25px;">
          <el-col :span="6" class="borderRight">
            <span style="width:40px;text-align:justify;display:inline-block">合计<i style="display: inline-block; padding-left: 100%;width: 100%;"></i></span>
          </el-col>
          <el-col :span="3" class="borderRight"></el-col>
          <el-col :span="1" class="borderRight"></el-col>
          <el-col :span="2" class="borderRight"></el-col>
          <el-col :span="3" class="borderRight"></el-col>
          <el-col :span="4" class="borderRight" style="text-align:right;padding-right:5px;color: rgba(0, 0, 0, 0.8);">¥{{invoiceHead.zamountWsj}}</el-col>
            <el-col :span="1" class="borderRight"></el-col>
            <el-col :span="4" style="text-align:right;padding-right:5px;color: rgba(0, 0, 0, 0.8);">¥{{invoiceHead.zamountSej}}</el-col>
        </el-row>
        <el-row class="box" style="color:rgba(156, 82, 35, 0.7);height:30px ;line-height:30px; border-top: 2px solid rgba(156, 82, 35, 0.7); ">
          <el-col :span="6" class="borderRight">
            <span >价税合计(大写) </span>
          </el-col>
          <el-col :span="10" style="text-align:left;padding-left:2px;display:flex;align-content:center">
            <i style="font-weight:bold;font-size:20px" class="iconfont icon-iconset0288"></i>
            {{ invoiceHead.zamountHsj|toChies}}

            </el-col>
          <el-col :span="4"  style="text-align:right;">(小写)</el-col>
            <el-col :span="4" style="text-align:center;padding-right:5px;color: rgba(0, 0, 0, 0.8);">¥{{invoiceHead.zamountHsj}}</el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="border: 2px solid rgba(156, 82, 35, 0.7);border-top:0px ;display:flex">
      <el-col :span="14">
        <el-row>
          <el-col
            :span="1"
            style="
              font-size: 18px;
              text-align: center;
              color: rgba(156, 82, 35, 0.7);
              font-size: 15px;
              border-right: 2px solid rgba(156, 82, 35, 0.7);
            "
          >
            <p style="margin-top: 10px">销</p>
            <p>售</p>
            <p>方</p>
          </el-col>
          <el-col :span="23" style="padding-left: 8px">
            <div class="item">
              <h5 style="width: 100px">
                名称:
                <i></i>
              </h5>
              <span>{{ invoiceHead.orgName }}</span>
            </div>
            <div class="item">
              <h5 style="width: 100px">
                纳税人识别号:
                <i></i>
              </h5>
              <span>{{ invoiceHead.orgTaxcode }}</span>
            </div>
            <div class="item">
              <h5 style="width: 100px">
                地址、电话:
                <i></i>
              </h5>
              <span>
               {{ invoiceHead.orgAddress }} {{ invoiceHead.orgTelephone }}
              </span>
            </div>
            <div class="item">
              <h5 style="width: 100px">
                开户行及账号:
                <i></i>
              </h5>
              <span>
                {{ invoiceHead.orgBankname }} {{ invoiceHead.orgBankaccount }}
              </span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10" style="display: flex; flex-decration: row;  ">
        <div
          class="left"
          style="
            font-size: 18px;
            text-align: center;
            color: rgba(156, 82, 35, 0.7);
            font-size: 15px;
            border-right: 2px solid rgba(156, 82, 35, 0.7);
            border-left: 2px solid rgba(156, 82, 35, 0.7);
            padding: 0px 3px;

          "
        >
          <p style="margin-top: 28px">备</p>
          <p>注</p>
        </div>
        <div class="right" style="padding:5px 10px;white-space:pre-wrap"  >
            {{invoiceHead.billRemark }}
        </div>

      </el-col>
    </el-row>

    <el-row  >
      <el-col :span="6"  >
         <div class="item">
              <h5 style="width: 60px">
                收款人:
                <i></i>
              </h5>
              <span>
               {{ invoiceHead.payeeName }}
              </span>
          </div>
      </el-col>
      <el-col
        :span="6"
      >
         <div class="item">
              <h5 style="width: 60px">
                复核:
                <i></i>
              </h5>
              <span>
               {{ invoiceHead.checkName }}
              </span>
          </div>
      </el-col>
      <el-col
        :span="6"
      >
       <div class="item">
              <h5 style="width: 60px">
                开票人:
                <i></i>
              </h5>
              <span>
              {{ invoiceHead.userName }}
              </span>
          </div>
      </el-col>
      <el-col
        :span="6"
      >
       <div class="item" style="position:relative; "  >
              <h5 style="width: 70px">
                销售方:(章)
                <i></i>
              </h5>
               <!-- <div >
                 <p id="text3" style="position:absolute;top:-87px;right:60px;color:rgba(255,2,0,1);z-index: 999; font-weight:bold;" >
                 {{invoiceHead.orgName}}</p>
              <div class="ellipse" style="position:absolute;right:0px;bottom:-105px; display:flex;align-items:center;justify-content:center;">
                {{ invoiceHead.orgTaxcode }}
              </div>
              <p style="position:absolute;top:0px;right:125px; text-align:center;color:rgba(255,2,0,1); font-weight:bold;">发票专用章</p>
               </div> -->

        </div>
      </el-col>
    </el-row>

  </el-form>
</template>

<script>
  export default {

    props: {
      invoiceHead: {
        type: Object,
        default: null,
      },
    },
    mounted(){
      $("#text1").arctext({
          radius:120
    })
      $("#text3").arctext({
          radius:110
    })
      $("#text2").arctext({
          radius:120,
          dir:-1
    })
    },
    filters: { //局部过滤器
            toChies: function(amount) { //形参
                // 汉字的数字
                const cnNums = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
                // 基本单位
                const cnIntRadice = ["", "拾", "佰", "仟"];
                // 对应整数部分扩展单位
                const cnIntUnits = ["", "万", "亿", "兆"];
                // 对应小数部分单位
                const cnDecUnits = ["角", "分"];
                // 整数金额时后面跟的字符
                const cnInteger = "整";
                // 整型完以后的单位
                const cnIntLast = "元";
                // 最大处理的数字
                const maxNum = 9999999999999999.99;
                // 金额整数部分
                let integerNum;
                // 金额小数部分
                let decimalNum;
                // 输出的中文金额字符串
                let chineseStr = "";
                // 分离金额后用的数组，预定义
                let parts;
                if (amount === "") {
                    return "";
                }
                amount = parseFloat(amount);
                if (amount >= maxNum) {
                    // 超出最大处理数字
                    return "";
                }
                if (amount === 0) {
                    chineseStr = cnNums[0] + cnIntLast + cnInteger;
                    return chineseStr;
                }
                // 转换为字符串
                amount = amount.toString();
                if (amount.indexOf(".") === -1) {
                    integerNum = amount;

                    decimalNum = "";
                } else {
                    parts = amount.split(".");
                    integerNum = parts[0];
                    decimalNum = parts[1].substr(0, 4);
                }
                // 获取整型部分转换
                if (parseInt(integerNum, 10) > 0) {
                    let zeroCount = 0;
                    const IntLen = integerNum.length;
                    for (let i = 0; i < IntLen; i++) {
                        const n = integerNum.substr(i, 1);
                        const p = IntLen - i - 1;
                        const q = p / 4;
                        const m = p % 4;
                        if (n === "0") {
                            zeroCount++;
                        } else {
                            if (zeroCount > 0) {
                                chineseStr += cnNums[0];
                            }
                            // 归零
                            zeroCount = 0;
                            //alert(cnNums[parseInt(n)])
                            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                        }
                        if (m === 0 && zeroCount < 4) {
                            chineseStr += cnIntUnits[q];
                        }
                    }
                    chineseStr += cnIntLast;
                }
                // 小数部分
                if (decimalNum !== "") {
                    const decLen = decimalNum.length;
                    for (let i = 0; i < decLen; i++) {
                        const n = decimalNum.substr(i, 1);
                        if (n !== "0") {
                            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                        }
                    }
                }
                if (chineseStr === "") {
                    chineseStr += cnNums[0] + cnIntLast + cnInteger;
                } else if (decimalNum === "") {
                    chineseStr += cnInteger;
                }
                return chineseStr;
            }
    },
    methods:{}
  }
</script>

<style scoped lang="scss">
  .ellipse3{
  width: 180px;
  height: 90px;
  margin: 50px;
  border :5px solid #FF0200;
  border-radius: 50% / 50%;
  color:#FF0200;
  // font-weight:bold;
  margin-top:50px;
}
.ellipse2{
  width: 172px;
  height: 82px;
  margin: 50px;
  border :2px solid #FF0200;
  border-radius: 50% / 50%;
  color:rgba(255,2,0,0.6);
  font-weight:bold;
}

.ellipse{
  width: 212px;
  height: 144px;
  margin: 50px;

  border :3px solid #FF0200;
  border-radius: 50% / 50%;
  color:#FF0200;
  // font-weight:bold;
}
.borderRight{
  border-right: 2px solid rgba(156, 82, 35, 0.7)
}
  .title {
    width: 75%;
    h3 {
      width: 100%;
      margin: 0;
      margin-right: 5px;
      height: 40px;

      color: rgba(156, 82, 35, 0.7);
      // background-color: green;
      font-size: 30px;
      font-weight: 500;
      text-align: justify;
      i {
        display: inline-block;
        padding-left: 100%;
        width: 100%;
      }

    }

    .line {
      width: 100%;
      height: 2.5px;
      border-top: 2.5px solid rgba(156, 82, 35, 0.7);
      border-bottom: 1.5px solid rgba(156, 82, 35, 0.7);
      margin-top: 0;
    }
  }
  .item {
    display: flex;
    flex-direction: row;

    height: 20px;
    // background-color: red;
    margin-top: 5px;
    h5 {
      width: 70px;
      margin: 0;
      margin-right: 5px;
      height: 20px;
      color: rgba(156, 82, 35, 0.7);
      line-height: 20px;
      // background-color: green;
      font-size: 14px;
      font-weight: 500;
      text-align: justify;
      i {
        display: inline-block;
        padding-left: 100%;
        width: 100%;
      }

    }
    span {
      height: 20px;
      line-height: 20px;
      color: rgba(0, 0, 0, 0.8);
    }
  }

  .box{
    // padding: 3px 2px;
    display: flex;
    text-align: center;

    .every{
      display: inline-block;
      // background-color: red;
      padding: 3px 5px;
    }
  }
</style>
